<template>
  <div class="line">
    <div class="top">
     <p class="title">未来7天游客量趋势图</p>
     <p class="bg"></p>
   </div>
   <div class="charts" ref="line"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'

const line = ref()
onMounted(()=>{
  const myCharts = echarts.init(line.value)
  myCharts.setOption({
    title: {
      text: '访问量',
      right: 20,
      top: 0,
      textStyle: {
        color: '#fff'
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false, //设置两边不留白
      splitLine: {
        show: false, // 取消分割线
      },
      data: ['周一','周二','周三','周四','周五','周六','周日']
    },
    yAxis: {
      splitLine: {
        show: false, // 取消分割线
      },
      // y轴轴线显示
      axisLine: {
        show: true
      },
      // 刻度
      axisTick: {
        show: true
      }
    },
    grid: {
      left: 30,
      top: 30,
      right: 30,
      bottom: 20
    },
    emphasis: {
        label: {
          fontSize: 24,
          color: '#fff',
        }
      },
    series: [
      {
        type: 'line',
        smooth: true, //平滑曲线
        data: [120,240,66,300,111,55,200],
        // 区域填充样式
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0, color: 'red' // 0% 处的颜色
            }, {
                offset: 1, color: 'blue' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          }
        },
        label: {
          show: true,
          fontSize: 16,
          color: '#fff'
        }
      }
    ]
  })
})




</script>

<style lang="scss" scoped>
  .line {
    width: 100%;
    height: 100%;
    background: url(../../images/dataScreen-main-lb.png) no-repeat;
    background-size: 100% 100%;
    .top {
       font-size: 20px;
       color: #fff;
       .title {
         margin-left: 20px;
         margin-bottom: 10px;
         margin-top: 10px;
       }
       .bg {
         background: url(../../images/dataScreen-title.png) no-repeat;
         background-size: 100% 100%;
         width: 68px;
         height: 7px;
         margin-left: 20px;
         
       }
       .txt-right {
         text-align: right;
         margin-right: 20px;
         span {
           color: yellowgreen;
         }
       }
     }
    .charts {
    height: 210px;
    }
  }
</style>
